<template>
  <Container class="brand-list">
    <div class="container-header" slot="header">
      <Form class="search">
        <Row>
          <Col span="5">
            <FormItem label="经销商名">
              <Input 
                class="start"
                v-model.trim="list.form.distributorName"
                placeholder="请输入经销商名"
                clearable
                @on-enter="onSearchBtnClick"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="经销商联系人">
              <Input 
                class="start"
                v-model.trim="list.form.contactName"
                placeholder="经销商联系人"
                clearable
                @on-enter="onSearchBtnClick">
              </Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="经销商联系手机">
              <Input 
                class="start"
                v-model.trim="list.form.contactMobile"
                placeholder="经销商联系手机"
                clearable
                @on-enter="onSearchBtnClick">
              </Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="IMEI/MEID码">
              <Input 
                class="start"
                v-model.trim="list.form.equipmentImei"
                placeholder="请输入PDA设备IMEI/MEID码"
                clearable
                @on-enter="onSearchBtnClick"/>
            </FormItem>
          </Col>
          <Col class-name="search small" span="1">
            <Button class="btn-search" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <TabPane label="经销商PDA绑定管理" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import DistributorSelect from '~/DistributorSelect'
import DistributorPdaListData from './list/DistributorPdaListData'
import { clearEmpty } from '@/util'
import { mapGetters } from 'vuex'
export default {
  name: 'setting/distributorPda/list',
  components: {
    DistributorSelect
  },
  data() {
    return {
      tab: 'tab1',
      list: DistributorPdaListData,
      options: {
        tableHeight: 300
      }
    }
  },
  mounted() {
    this.initTable()
    this.$bus.$on('onUnbound', ({ item }) => this.onUnbound(item))
    this.onSearchBtnClick()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        distributorName: this.list.form.distributorName,
        contactName: this.list.form.contactName,
        contactMobile: this.list.form.contactMobile,
        equipmentImei: this.list.form.equipmentImei
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$ajaxGet('/distributor/equipment/list', param).then(data => {
        this.list.data = []
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          return {
            id: item.id,
            createDate: item.createDate,
            equipmentImei: item.equipmentImei,
            distributorId: item.distributorId,
            contactName: item.contactName,
            contactMobile: item.contactMobile,
            distributorName: item.distributorName,
            distributorSn: item.distributorSn ? item.distributorSn : '-'
          }
        })
        this.total = data.total
        this.list.status = 'pass'
        this.backTableTop()
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onUnbound(item) {
			this.$Modal.confirm({
        title: '解绑',
        content: '确定解绑当前设备？',
        onOk: () => {
          let param = {
            id: item.id
          }
          this.$ajaxPost('distributor/equipment/unBind', param).then(data => {
            this.$Notice.success({
              title: '解除解绑',
              desc: `<span class="font-red">${item.distributorName}</span> 已被解绑。`
            })
            this.getData()
          })
        }
      })
		},
    onPageChange(number) {
      this.list.currentPage = number
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.getData()
    }
  },
  watch: {
  }
}
</script>